<template>
	<view class="page">
		<view @click="navToDetail(item)" v-for="(item, index) in list" :key="index" class="getting">
			<view class="getting-title">
				<!-- <view class="title">{{ item.seedName }}</view> -->
				<view class="title">{{ item.createdByName }}{{ item.propName }}</view>
				<view class="desc">{{ item.createdTime }}</view>
			</view>
			<view class="getting-image">+{{ item.recordValue }}</view>
		</view>
		<view v-if="!loading && list.length" class="loading-more"><text class="loading-more-text">~~没有更多了~~</text></view>
	</view>
</template>

<script>
import { growthDynamicListPage } from '@/service/farm.js';
export default {
	data() {
		return {
			list: [],
			loading: true,
			pageNum: 1
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.getList();
	},
	async onPullDownRefresh() {
		this.pageNum = 1;
		await this.getList();
		uni.stopPullDownRefresh();
	},
	onReachBottom() {
		this.getList();
	},
	methods: {
		navToDetail(item) {
			uni.navigateTo({
				url: 'detail?id=' + item.id
			});
		},
		async getList() {
			try {
				this.loading = true;
				const resp = await growthDynamicListPage({ userSeedId: this.id, pageNum: this.pageNum, pageSize: 10 }, { loading: true });
				this.list = this.pageNum == 1 ? resp.data : [...this.list, ...resp.data];
				this.pageNum++;
			} finally {
				this.loading = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
view {
	display: flex;
	box-sizing: border-box;
}
.page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: $tree-bg;
}
.getting {
	width: 710upx;
	// height: 150upx;
	margin: 10upx auto;
	background: #e4f6c0;
	border-radius: 20upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20upx 40upx;
	position: relative;

	&-image {
		// background-color: #ffffff;
		border-radius: 50%;
		margin-right: 40upx;
		color: #4e8308;
	}
	&-title {
		// margin-left: 10upx;
		display: flex;
		flex-direction: column;
	}
	.title {
		color: #4e8308;
		font-size: 34upx;
	}
	.desc {
		// margin-top: 10upx;
		color: #5c9408;
		font-size: 28upx;
	}

	&-button {
		position: absolute;
		right: 40upx;
		top: 44upx;
		image {
			height: 54upx;
			width: 156upx;
		}
	}
}
.loading-more-text {
	color: #ffffff;
}
</style>
